<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Simple input</title>
        <script type="text/javascript">
          function setup_event_listener() {
              console.log('input loaded')
              var elem = document.getElementById('qute-input-existing');
              console.log(elem);
              elem.addEventListener('input', function() {
                  console.log("contents: " + elem.value);
              });
          }
        </script>
    </head>
    <body onload="setup_event_listener()">
        <form><input id="qute-input"></input></form>
        With padding:
        <form><input type="text" style="padding-left: 20px;"></input></form>
        With existing text (logs to JS)::
        <form><input id="qute-input-existing" value="existing"></input></form>
        Contenteditable attributes
        <p contenteditable="true">laythe</p>
    </body>
</html>
